<template>
  <div class="pie-wrap">
    <div id="charts10" ref="charts10" style="height: 400px;"></div>
  </div>
</template>
<script>
  export default {
    mounted() {
      this.drawchart()
    },
    methods: {
      drawchart() {
        var option = {
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          legend: {
            show: false,
            orient: 'vertical',
            x: 'left',
            data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
          },
          series: [
            {
              name:'访问来源',
              type:'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: {
                backgroundColor: 'rbg(0, 0, 0)',
                normal: {
                  show: true,
                  fontSize: '18',
                  color: '#fff'
                }
              },
              labelLine: {
                normal: {
                  show: true,
                  length: 20,
                  length2:10
                }
              },
              itemStyle: {
                shadowBlur: 80,
                // 阴影水平方向上的偏移
                shadowOffsetX: 0,
                // 阴影垂直方向上的偏移
                shadowOffsetY: 0,
                // 阴影颜色
                shadowColor: 'rgba(0, 0, 0, 0.3)'
              },
              data:[
                {value:385724, name:'患者论坛', itemStyle:{color: '#205460'}},
                {value:162929, name:'在线问诊', itemStyle: {color: '#397f74'}},
                {value:71347, name:'社交媒体', itemStyle: {color: '#80b790'}}
              ]
            }
          ]
        };

        var mycharts = this.$echarts.init(this.$refs.charts10)
        mycharts.setOption(option)
      }
    }
  }
</script>
<style>
  .pie-wrap{
    position: relative;
  }
  .pie-wrap .pie-count{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 170px;
    height: 80px;
    top: 160px;
    left: 50%;
    margin-left: -85px;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    color: #fff;
  }
</style>
